<template>
  <div class="allDetail">
    <div class="content">
      <div class="swiper-container3">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in data.bannerUrl" :key="index">
            <img :src="item" alt>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="detailsTitle">
        <div class="dtHeader">
          <h3>{{data.title}}</h3>
          <p class=".desc">{{data.desc}}</p>
          <div class="price">
            <span>￥
              <i>{{data.pre}}</i>
            </span>
            <p>已售{{data.ys}}份</p>
          </div>
          <p class="tip">
            <i class="iconfont icon-tixing"></i>
            17:00前下单，预计次日送达(节假日及特殊情况延后发货)
          </p>
        </div>
      </div>
      <div class="evaluate">
        <div class="eTitle">
          <span>用户评价（{{data.evaluateNum}}）</span>
          <router-link to="/">全部 ></router-link>
        </div>
        <div class="eList" v-for="(item, index) in data.evaluate" :key="index">
          <div v-if="index<2">
            <div class="elContent">
              <div class="elLeft">
                <img :src="data.userImg" alt>
              </div>
              <div class="elRight">
                <div class="elrTop">
                  <span class="username">{{item.username}}</span>
                  <span class="time">{{item.time}}</span>
                </div>
                <div class="elBottom">
                  <i class="iconfont icon-haoping"></i>
                  {{item.highOpinion}}
                </div>
              </div>
            </div>
            <div class="elDesc">{{item.content}}</div>
            <div v-if="index < 1" class="divBorder"></div>
          </div>
        </div>
      </div>
      <div class="commodity">
        <div class="listTitle">
          <p>
            <span></span>&nbsp;&nbsp;商品详情&nbsp;&nbsp;
            <span></span>
          </p>
        </div>
        <div class="imgContent">
          <img :src="item" alt v-for="(item, index) in data.details" :key="index">
        </div>
      </div>
    </div>
    <div class="bottomNav">
      <div class="bnLeft">
        <router-link to="/" class="home">
          <i class="iconfont icon-home"></i>
          <span>进商城</span>
        </router-link>
        <router-link to="/" class="collect">
          <i class="iconfont icon-xiangqu"></i>
          <span>收藏</span>
        </router-link>
        <router-link to="/" class="goodsallcart">
          <i class="iconfont icon-gouwuche"></i>
          <span>购物车</span>
          <strong>0</strong>
        </router-link>
      </div>
      <div class="bnRight">
        <router-link to="/" class="add">
          <span>加入购物车</span>
        </router-link>
        <router-link to="/" class="buy">
          <span>立即购买</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
  name: 'detail',
  data () {
    return {
      name: '123',
      data: {}
    }
  },
  mounted () {
    this.getData()
    this.bannerSwiper()
  },
  methods: {
    getData: function () {
      var that = this
      if (this.$route.query.id) {
        var id = this.$route.query.id
      } else {
        var id = this.$route.params.id
      }
      if (!this.$route.params.id && !this.$route.query.id) {
        console.log(
          this.$route.params.id +
            '%c 用params传值 刷新接受传值的页面会数据丢失，建议用 query传值',
          'color:red'
        )
      }
      this.axios.get('/city.json').then(res => {
        var data = res.data.detailsList
        for (var i = 0; i < data.length; i++) {
          if (id === data[i].detailsId) {
            that.data = data[i]
          }
        }
        // console.log(this.data)
      })
    },
    bannerSwiper: function () {
      new Swiper('.swiper-container3', {
        pagination: {
          el: '.swiper-pagination'
        },
        paginationType: 'fraction',
        observer: true,
        observeParents: true
      })
    }
  }
}
</script>

<style scope>
.allDetail {
  width: 100%;
  overflow: hidden;
}

.swiper-container3 {
  position: relative;
}

.swiper-container3 .swiper-wrapper .swiper-slide img {
  display: block;
  width: 100%;
}

.swiper-container3 .swiper-pagination-bullet-active {
  background: #ff712b;
}

.detailsTitle {
  padding: 0 0.2rem;
}
.evaluate {
  margin: 0 0.2rem;
}
.dtHeader,
.evaluate {
  background: #fff;
  padding: 0.3rem;
  border-radius: 0.1rem;
  box-shadow: 0.05rem 0.05rem 0.15rem #ccc;
  margin-top: 0.1rem;
}

.dtHeader h3 {
  font-size: 0.36rem;
  color: #303030;
}

.dtHeader p {
  font-size: 0.28rem;
  color: #909090;
}

.price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.2rem;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid #ccc;
}

.price span {
  font-size: 0.34rem;
  color: #ff712b;
}
.price span i {
  font-size: 0.44rem;
  font-weight: bolder;
  font-style: normal;
}
.tip {
  font-size: 0.26rem;
  color: #303030;
  margin-top: 0.2rem;
}
.tip i {
  font-size: 0.32rem;
  color: #ff712b;
}
.eTitle {
  padding: 0.3rem 0.3rem 0.2rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.eTitle span {
  font-size: 0.32rem;
  color: #303030;
  display: block;
}
.eTitle a {
  font-size: 0.26rem;
  color: #303030;
}
.elContent {
  display: flex;
  flex-direction: row;
  margin-top: 0.24rem;
}
.elLeft img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  display: block;
}
.elRight {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: 0.2rem;
}
.elRight .elrTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.elRight .elrTop span {
  font-size: 0.28rem;
  display: block;
}
.divBorder {
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.elBottom {
  font-size: 0.26rem;
  color: #ff712b;
  margin-top: 0.05rem;
}
.elDesc {
  font-size: 0.28rem;
  color: #303030;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
  padding-bottom: 0.2rem;
}
.commodity {
  background: #fff;
  margin: 0.2rem;
  border-radius: 0.1rem;
  box-shadow: 0.05rem 0.05rem 0.15rem #ccc;
  margin-top: 0.1rem;
  padding-bottom: 0.2rem;
}
.listTitle {
  margin: 0 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #ccc;
}
.listTitle p {
  font-size: 0.32rem;
  color: #303030;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 0.1rem;
}
.listTitle p span {
  width: 0.4rem;
  height: 1px;
  background-color: #333;
}
.imgContent {
  padding: 0.2rem;
}
.imgContent img {
  width: 100%;
  display: block;
}
.bottomNav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #fff;
  align-items: center;
  text-align: center;
}
.bottomNav .bnLeft {
  width: 45%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.bottomNav .bnRight {
  width: 55%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.bottomNav .home i {
  font-size: 0.4rem;
  color: #02cb6a;
}
.bottomNav .home,
.bottomNav .collect,
.bottomNav .goodsallcart {
  width: 1rem;
}
.bottomNav i {
  font-size: 0.4rem;
}
.bottomNav a.add {
  background-color: #ffb432;
  color: #fff;
  display: block;
  width: 50%;
  height: 0.83rem;
  line-height: 0.83rem;
  border-right: none;
}
.bottomNav a.buy {
  background-color: #ff5d32;
  color: #fff;
  display: block;
  width: 50%;
  height: 0.83rem;
  line-height: 0.83rem;
  border-right: none;
}
.bottomNav a {
  font-size: 0.28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  border-right: 1px solid #ccc;
  position: relative;
}
.bottomNav a strong {
  background-color: #ff0000;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  width: 0.3rem;
  height: 0.3rem;
  line-height: 0.3rem;
  position: absolute;
  right: 0;
  top: 0;
}
</style>
